<template>
  <el-container>
    <el-header>
      <el-menu :router="true" mode="horizontal" :default-active="$route.path">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/students">学生名单</el-menu-item>
        <template v-if="!user.isLoggedIn">
          <el-menu-item index="/login">登录</el-menu-item>
          <el-menu-item index="/register">注册</el-menu-item>
        </template>
        <template v-else>
          <el-menu-item v-if="user.role === 'student'" index="/profile">个人信息</el-menu-item>
          <el-menu-item v-if="user.role === 'admin'" index='/admin'>控制台</el-menu-item>
          <el-menu-item v-if="user.role === 'teacher'" index="/teacher_profile">个人信息</el-menu-item>
          <el-menu-item @click="logout">退出登录</el-menu-item>
        </template>
      </el-menu>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { useUserStore } from './stores/user';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
//import { useMemberStore } from './stores/member';
//import { computed } from 'vue';

const user = useUserStore()
const router = useRouter()
//const memberStore = useMemberStore()

//const user = computed(() => {
  //memberStore.getUserByUsername(userStore.username)
//})
//const id = ref(user.id)

const logout = () => {
  user.logout()
  router.push('/')
  ElMessage.success('已退出登录')
}
</script>